<template>
  <div class="myJump">
    <!-- 回退 -->
    <div class="remove" @click="backCenter">
      <span class="iconfont icon-shanchu1"></span>
    </div>
    <!-- 内容 -->
    <div class="detail">
      <span>孤岛</span>
    </div>
    <!-- 登录图标 -->
    <div class="loginIn">
      <ul>
        <li>
          <a href="#">
            <div class="omit" @click="loginClick">
              <span class="iconfont icon-weibo"></span>
              <span>微博登入</span>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="omit" @click="loginClick">
              <span class="iconfont icon-weixin"></span>
              <span>微信登入</span>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="omit">
              <span class="iconfont icon-tel" @click="toSign"></span>
              <span>手机登入</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- 更多登录方式 -->
    <div class="more">
      <span>更多登录方式</span>
    </div>
    <!-- 条约 -->
    <div class="loginMsg">
      <div class="clause" @click="toToggle">
        <input type="checkbox" v-model="isCheck" />
        <span>已经阅读并同意以下条款</span>
      </div>
      <div class="term">《服务条款》《隐私协议》</div>
    </div>
    <!-- error -->
    <div class="loginError" v-if="isShow">
      <span>孤岛：请先阅读并同意《服务条款》《隐私协议》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCheck : false,
      isShow: false,
      timer: null,
    };
  },
  methods: {
    //点击改变状态
    toToggle(){
         this.isCheck != this.isCheck;
    },
    loginClick() {
      if (this.isCheck == false) {
        this.isShow = true;
        //设定延迟隐藏
        this.timer = setTimeout(() => {
          this.isShow = false;
          // console.log(111);
        }, 1000);
      } else {
        this.isShow = false;
        alert("登录失败");
      }
    },
    toSign() {
      if (this.isCheck) {
        this.$router.push({ path: "/mylogin" });
      } else {
        this.isShow = true;
        //设定延迟隐藏
        this.timer = setTimeout(() => {
          this.isShow = false;
          // console.log(111);
        }, 1000);
      }
    },
    //返回个人中心
    backCenter() {
      this.$router.push("/mycenter");
    },
  },
  created() {
    //清除延迟函数
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
body,
html {
  margin: 0;
  padding: 0;
}
.myJump {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  position: relative;
}
ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
a {
  text-decoration: none;
  color: #000;
}
.remove {
  width: 50px;
  height: 50px;
  text-align: center;
  margin-left: 90%;
  font-size: 20px;
}
.detail {
  height: 350px;
  display: flex;
  justify-content: center;
  padding-top: 100px;
  font-size: 30px;
  span {
    width: 0px;
    height: 0px;
    display: block;
  }
}
.loginIn {
  ul {
    display: flex;
    justify-content: space-around;
    li {
      width: 100px;
      height: 69px;
      .omit {
        text-align: center;
        span {
          display: block;
          font-size: 16px;
          &:first-child {
            font-size: 30px;
          }
          &:last-child {
            font-weight: 500;
            color: #323232;
          }
        }
        .icon-weibo {
          color: #f00;
        }
        .icon-weixin {
          color: #0f0;
        }
        .icon-tel {
          color: #00f;
        }
      }
    }
  }
}
.more {
  height: 30px;
  font-size: 16px;
  text-align: center;
  color: #323232;
  font-weight: bolder;
  // text-shadow: #323232 0px 1px 0px;
}
.loginMsg {
  height: 67px;
  text-align: center;
  .clause {
    span {
      font-size: 16px;
      color: #ccc;
    }
  }
  .term {
    font-size: 18px;
    color: #808080;
  }
}
.loginError {
  width: 300px;
  height: 40px;
  background: #fff;
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: -170px;
  margin-left: 38px;
  text-align: center;
  font-size: 14px;
}
</style>